<template>
  <div class="app-container">
     <el-form label-width="120px">
      <el-form-item label="用户名称">
        <el-input v-model="user.nickname"/>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="user.mobile"/>
      </el-form-item>
      <el-form-item label="标签">
        <el-select v-model="user.sign" clearable placeholder="请选择">
          <el-option :value="0" label="普通用户"/>
          <el-option :value="1" label="教师"/>
        </el-select>
      </el-form-item>

      <el-form-item label="头像">
          <img :src="user.avatar" style="width: 80px; height: 80px; vertical-align: middle; margin-right: 20px"/>
          <!-- 文件上传按钮 -->
          <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
          </el-button>

          <image-cropper
            v-show="imagecropperShow"
            :width="300"
            :height="300"
            :key="imagecropperKey"
            :url="BASE_API+'eduoss/fileoss'"
            field="file"
            @close="close"
            @crop-upload-success="cropSuccess"/>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import user from '@/api/edu/user'
import ImageCropper from '@/components/ImageCropper'
export default {
  components : {ImageCropper},
  data () {
    return {
      user : {},
      imagecropperShow : false,//是否显示上传组件（即窗口弹出）
      imagecropperKey : 0,
      BASE_API : process.env.BASE_API,
      saveBtnDisabled : false
    }
  },
  created() {
    this.init()
  },
  watch: {  //监听
    $route(to, from) { //路由变化方式，路由发生变化，方法就会执行
      this.init()
    }
  },
  methods: {
    //上传头像窗口关闭方法
    close() {
      this.imagecropperShow = false
      //类似于初始化图片
      this.imagecropperKey = this.imagecropperKey + 1
    },
    //上传头像成功方法
    cropSuccess(data) {
      this.imagecropperShow = false
      //data类似于response.data
      this.user.avatar = data.url
      //类似于初始化图片
      this.imagecropperKey = this.imagecropperKey + 1
    },
    //根据路径是否有id进行相应初始化
    init() {
      if (this.$route.params && this.$route.params.id) {//如果有id，说明是修改方法
        //从路径获取id值
        const id = this.$route.params.id
        this.getInfo(id)
      } else {//如果没有id，说明是新增方法
        this.user = {}
        this.user.avatar = 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png' //默认头像
      }
    },
    //保存或修改
    saveOrUpdate() {
      //判断this.teacher是否包含id
      if (this.user.id) {
        this.updateUser()
      } else {
        this.addUser()
      }
    },
    
    getInfo(id) {
      user.getUserInfo(id)
        .then(response => {
          this.user = response.data.user
          this.user.sign = Number(this.user.sign)
        })
    },

    addUser() {
      user.addUser(this.user)
        .then(response => {
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.$router.push({path : '/user/list'})
        })
    },

    updateUser() {
      user.updateUser(this.user)
        .then(response => {
          this.$message({
              type: 'success',
              message: '更新成功!'
            });
            this.$router.push({path : '/user/list'})
        })
    }
  },
}
</script>
